<!DOCTYPE html>
<html lang="en">
<head>
<title>Single</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="{{ url_for('static', filename='css/font-awesome.css') }}" rel="stylesheet"> 
<!--web-fonts-->
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet">
<!--//web-fonts-->
</head>
<body>
<!-- banner -->
	<div class="banner inner-bg-w3" id="home">
		<!-- header -->
		<div class="banner-top">
			<div class="social-bnr-agileits">
				<ul>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>					
				</ul>
			</div>
			<div class="contact-bnr-w3-agile">
				<ul>
					<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">INFO@EXAMPLE.COM</a></li>
					<li><i class="fa fa-phone" aria-hidden="true"></i>+1 (100)222-23-33</li>	
					<li>
						<div class="search">
							<input class="search_box" type="checkbox" id="search_box">
							<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
							<div class="search_form">
								<form action="#" method="post">
									<input type="search" name="Search" placeholder="Search..." required="" />
									<input type="submit" value="Send" />
								</form>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
		<header>
			<div class="container">

			<!-- navigation -->
			<div class="w3_navigation">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<div class="w3_navigation_pos">
						<h1><a href="index"><span>D</span>elish<span>F</span>ood</a></h1>
					</div>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="menu menu--miranda">
						<ul class="nav navbar-nav menu__list">
							<li class="menu__item"><a href="index" class="menu__link">Home</a></li>
							<li class="menu__item"><a href="about" class=" menu__link">About</a></li>
							<li class="menu__item"><a href="services" class=" menu__link">Services</a></li>
							<li class="menu__item"><a href="gallery" class=" menu__link">Gallery</a></li>
							<li class="dropdown menu__item">
						<a href="#" class="dropdown-toggle menu__link"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="codes">Short Codes</a></li>
							<li><a href="icons">Icons</a></li>
						</ul>
					</li>
							<li class="menu__item"><a href="contact" class=" menu__link">Contact</a></li>
						</ul>
					</nav>
				</div>
			</nav>	
	</div>
	<div class="clearfix"></div>
		<!-- //navigation -->
			</div>
		</header>
	<!-- //header -->
	</div>
<!-- //banner -->
<!--/content-inner-section-->
				<div class="w3_content_agilleinfo_inner">
						<div class="container">
				            <div class="inner-agile-w3l-part-head">
					        <h2 class="tittle-w3">Single <span>Page</span></h2>
							</div>
							   <div class="latest-news-agile-info">
								   <div class="col-md-8 latest-news-agile-left-content">
											<div class="single video_agile_player">
											       
										            <div class="video-grid-single-page-agileits">
														<div id="video"> <img src="{{ url_for('static', filename=imgPath) }}" alt="" class="img-responsive" /> </div>
													</div>
													 <h4>{{ recipe.recipeName }}</h4>
													 <p>{{ recipe.recipeDescribe | safe }}</p>
										    </div>
										
										<div class="admin-text">
												<h5>WRITTEN BY ADMIN</h5>
												<div class="admin-text-left">
													<a href="#"><img src="{{ url_for('static', filename='images/admin.jpg') }}" alt=""></a>
												</div>
												<div class="admin-text-right">
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available, 
													sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
													<span>View all posts by :<a href="#"> Admin </a></span>
												</div>
												<div class="clearfix"> </div>
										</div>
                                       <div class="response">
							<h4>Responses</h4>
                                           {% for review in reviews %}
							<div class="media response-info">
								<div class="media-left response-text-left">
									<a href="#">
										<img class="media-object" src="{{ url_for('static', filename='images/admin.jpg') }}" alt="">
									</a>
									<h5><a href="#">{{ review.viewerName }}</a></h5>
								</div>
								<div class="media-body response-text-right">
									<p>{{ review.comm }}</p>
									<ul>
										<li>{{ review.createTime }}</li>
										<li><a href="single"><i class="fa fa-reply" aria-hidden="true"></i> Reply</a></li>
									</ul>
                                </div>
							</div>
                                           {% endfor %}
						</div>
											<div class="all-comments-info">
												 <h5 >LEAVE A COMMENT</h5>
												<div class="agile-info-wthree-box">
													<form action="sendReview" method="post">
													   <div class="col-md-6 form-info">
														<input type="text" name="name" placeholder="Your Name" required="">			           					   
														<input type="email" name="email" placeholder="Your Email" required="">
														<input type="text" name="phone" placeholder="Your Phone" required="">	
													  </div>
													   <div class="col-md-6 form-info">
														
														<textarea name="message" placeholder="Message" required=""></textarea>
														<input type="submit" value="SEND">
													 </div>
													 <div class="clearfix"> </div>
														
														
													</form>
												</div>
											</div>
								   </div>
								   <div class="col-md-4 latest-news-agile-right-content">
								   <h4 class="side-t-w3l-agile">Search Here</h4>
										<div class="side-bar-form">
										 <form action="#" method="post">
											<input type="search" name="search" placeholder="Search here...." required="required">
											<input type="submit" value=" ">
										 </form>
									    </div>
										<div class="w3l-blog-list">
											<h4 class="side-t-w3l-agile">Archives List</h4>
											<ul>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>Aug (15)</a></li>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>Oct (20)</a></li>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>November (8)</a></li>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>December (25)</a></li>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>August (9)</a></li>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>July (15)</a></li>
												<li><a href="#"><i class="fa fa-long-arrow-right"> </i>Mar (25)</a></li>
											</ul>
										 </div>
											<div class="agile-info-recent">
											<h4 class="side-t-w3l-agile">Latest News</h4>
											<div class="w3ls-recent-grids">
												<div class="w3l-recent-grid">
													<div class="wom">
														<a href="single"><img src="{{ url_for('static', filename='images/l3.jpg') }}" alt=" " class="img-responsive"></a>
													</div>
													<div class="wom-right">
														<h5><a href="single">Lorem Integer rutrum</a></h5>
														<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. 
															Ut tellus dolor, dapibus eget.</p>
															<ul class="w3l-sider-list">
																<li><i class="fa fa-clock-o" aria-hidden="true"></i>On Sep 12, 2016</li>
																<li><i class="fa fa-eye" aria-hidden="true"></i> 2602</li>
															</ul>
													</div>
													<div class="clearfix"> </div>
												</div>
												<div class="w3l-recent-grid">
													<div class="wom">
														<a href="single"><img src="{{ url_for('static', filename='images/l2.jpg') }}" alt=" " class="img-responsive"></a>
													</div>
													<div class="wom-right">
															<h5><a href="single">Lorem Integer rutrum</a></h5>
														<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. 
															Ut tellus dolor, dapibus eget.</p>
															<ul class="w3l-sider-list">
																<li><i class="fa fa-clock-o" aria-hidden="true"></i>On Oct 16, 2016</li>
																<li><i class="fa fa-eye" aria-hidden="true"></i> 2742</li>
															</ul>
													</div>
													<div class="clearfix"> </div>
												</div>
												<div class="w3l-recent-grid">
													<div class="wom">
														<a href="single"><img src="{{ url_for('static', filename='images/l1.jpg') }}" alt=" " class="img-responsive"></a>
													</div>
													<div class="wom-right">
															<h5><a href="single">Lorem Integer rutrum</a></h5>
														    <p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. 
															Ut tellus dolor, dapibus eget.</p>
															<ul class="w3l-sider-list">
																<li><i class="fa fa-clock-o" aria-hidden="true"></i>On Nov 20, 2016</li>
																<li><i class="fa fa-eye" aria-hidden="true"></i> 2802</li>
															</ul>
													</div>
													<div class="clearfix"> </div>
												</div>
											</div>
										</div>
										
							       </div>
								   <div class="clearfix"></div>
							   </div>
					
						</div>
				</div>
			<!--//content-inner-section-->
<!-- Footer -->

			<div class="copyright-wthree">
				<p>Copyright &copy; 2017.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
			</div>
<!-- //Footer -->
	<a href="#home" class="scroll" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->

	
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-2.1.4.min.js') }}"></script>
<!-- Dropdown-Menu-JavaScript -->
			<script>
				$(document).ready(function(){
					$(".dropdown").hover(            
						function() {
							$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
							$(this).toggleClass('open');        
						},
						function() {
							$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
							$(this).toggleClass('open');       
						}
					);
				});
			</script>
		<!-- //Dropdown-Menu-JavaScript -->
 <!-- start-smoth-scrolling -->
<script type="text/javascript" src="{{ url_for('static', filename='js/move-top.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/easing.js') }}"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
<!--js for bootstrap working-->
	<script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
<!-- //for bootstrap working -->
<!-- script-for-menu -->
					<script>					
						$("span.menu").click(function(){
							$(".top-nav ul").slideToggle("slow" , function(){
							});
						});
					</script>
					<!-- script-for-menu -->
</body>
</html>